<template>
  <div class="myContainer">
    <div class="mains_contain">
      <el-form :inline="true" size="small" label-width="80px">
        <el-form-item label="任务名称">
          <el-input v-model="searchForm.taskName" clearable placeholder="请输入角色名称" />
        </el-form-item>
        <el-form-item label="容器镜像">
          <el-input v-model="searchForm.containerFileName" clearable placeholder="请输入容器镜像" />
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="handlerSearch" icon="el-icon-search" size="mini">查询</el-button>
        </el-form-item>
      </el-form>
      <div class="contant">
        <el-table :data="tableData" v-if="tableData.length" style="width: 100%" @selection-change="handleSelectionChange" fit :max-height="maxHeight" border stripe size="mini" highlight-current-row
          :header-cell-style="{ background: '#e5e5e5', color: '#000' }">
          <el-table-column prop="taskName" label="任务名称" align="center" min-width="120">
            <!-- <template slot-scope="{ row }">
              <el-link type="primary" @click="onJump(row)">{{row.taskName}}</el-link>
            </template> -->
          </el-table-column>
          <el-table-column prop="containerFileName" label="容器镜像" align="center"/>
          <el-table-column prop="statistics" label="状态数量" width="420" align="center">
            <template slot-scope="{ row }">
              <ul class="statusUl">
                <li>
                  <span style="background:#F56C6C"></span>
                  <span style="color:#F56C6C">失败</span>
                  <span>{{row.statistics && row.statistics.fail }}</span>
                </li>
                <li>
                  <span style="background:#409EFF"></span>
                  <span style="color:#409EFF">执行中</span>
                  <span>{{row.statistics && row.statistics.executing }}</span>
                </li>
                <li>
                  <span style="background:#67c23a"></span>
                  <span style="color:#67c23a">成功</span>
                  <span>{{ row.statistics&& row.statistics.success }}</span>
                </li>
              </ul>
            </template>
          </el-table-column>
          <el-table-column prop="containerFileSchema" label="操作系统架构" align="center" min-width="150"/>
          <el-table-column prop="containerFileVersion" label="容器版本" align="center"/>
          <el-table-column prop="createTime" label="创建时间" align="center" min-width="150">
            <template slot-scope="{ row }">
              {{ row.createTime |formatTime }}
            </template>
          </el-table-column>
          <el-table-column label="操作" align="center" min-width="150" fixed="right">
            <template slot-scope="{ row }">
              <el-button type="text" size="mini" @click="onJump(row)" icon="el-icon-view">查看详情</el-button>
              <el-button type="text" style="color: #f56c6c" size="mini" icon="el-icon-delete" @click="handleDelete(row)">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
        <div style="text-align: right">
          <pagination v-show="pagination.total > 0" :limit.sync="pagination.pageSize" :page.sync="pagination.page" :total="pagination.total" @pagination="getPageList" />
        </div>
      </div>
    </div>
    <el-dialog title="升级详情" :visible.sync="dialogVisible" width="1000px" :close-on-click-modal="false">
      <el-table :data="SelectedTableData" style="width: 100%" fit :max-height="maxHeight" border stripe size="mini" highlight-current-row :header-cell-style="{ background: '#e5e5e5', color: '#000' }">
        <el-table-column prop="deviceModel" label="设备型号" />
        <el-table-column prop="deviceSn" label="设备标识" />
        <el-table-column prop="containerName" label="安装名称" />
        <el-table-column prop="containerIp" label="容器IP地址" />
        <el-table-column prop="containerMemoryTotal" label="分配内存（MB）" />
        <el-table-column prop="containerStorageTotal" label="存储空间（MB）" />
        <el-table-column prop="containerIoPort" label="物理接口" />
        <!-- <el-table-column prop="containerStateDescribe" label="备注">
          <template slot-scope="scope">
            <span style="color:#F56C6C">{{scope.row.containerStateDescribe}}</span>
          </template>
        </el-table-column> -->
        <el-table-column prop="containerStateDescribe" label="安装状态" width="110">
          <template slot-scope="scope">
            <span style="color:#409EFF" v-if="scope.row.containerState == 'execute'">执行中</span>
            <span style="color: #67c23a" v-if="scope.row.containerState == 'success'">成功</span>
            <span style="color: #F56C6C" v-if="scope.row.containerState == 'fail'">失败</span>
          </template>

        </el-table-column>
      </el-table>
      <div style="text-align: right;margin-top:10px">
        <el-button type="primary" size="small" @click="dialogVisible = false">确定</el-button>
        <el-button @click="dialogVisible = false" size="small">取消</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import * as api from "@/api/sys/role";
import { getList, getById, deleteById } from "@/api/container"
import storage from "@/utils/storage";

export default {
  comments: {},
  props: {},
  data() {
    return {
      searchForm: {},
      dialogVisible: false,
      multipleSelection: [],
      tableData: [{}],
      SelectedTableData: [],
      pagination: {
        total: 0,
        page: 1,
        pageSize: 10,
      },
      tenantList: [],
      checkUserList: [],
    };
  },
  computed: {
    maxHeight() {
      var curHeight =
        window.innerHeight ||
        document.documentElement.clientHeight ||
        document.body.clientHeight;
      return curHeight - 280;
    },
    checkList() {
      let listAll = [];
      this.checkUserList.forEach((item) => {
        listAll.push(item.id);
      });
      return listAll;
    },
  },
  created() {

  },
  mounted() {
    this.getPageList()
  },
  methods: {
    onJump(row) {
      this.$router.push({ path: "/containerDeployment" });
      storage.setItem('isInit', 1)//判断从哪里跳转过去 0 ====容器商店 1==== 我的容器
      // storage.setItem('taskState', row.taskState)//判断从哪里跳转过来 0 ====容器商店 1==== 我的容器
      this.$bus.$emit('isInit', row)
      storage.setItem('containerShopRow', row)
    },
    handleDeleteUser(row) {
    },
    handlerSee(row) {
      getById(row.id).then(res => {
        this.SelectedTableData = res.data.containerTaskDetailDTOList
        this.dialogVisible = true
      })
    },
    // 查询
    handlerSearch() {
      this.search();
    },
    // 复选框事件
    handleSelectionChange(val) {
      // this.multipleSelection = val;
    },
    getPageList() {
      this.search();
    },

    search() {
      if (this.searchForm.taskName == "") {
        this.searchForm.taskName = null;
      }
      if (this.searchForm.containerFileName == "") {
        this.searchForm.containerFileName = null;
      }
      const p = Object.assign({}, this.pagination, this.searchForm);
      getList(p).then((resp) => {
        console.log(resp);
        this.tableData = resp.data.list;
        this.pagination.total = resp.data.pagination.total
      });
    },
    handleDelete(row) {
      this.$confirm('此操作将删除该数据, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        deleteById(row.id).then(res => {
          this.search();
          this.$message({
            type: 'success',
            message: '删除成功!'
          });
        })

      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        });
      });
    },

  },

};
</script>

<style lang="scss">
.myContainer {
  padding: 20px;

  .curHeader {
    position: relative;
    height: 40px;
    .searcherBox {
      position: absolute;
      right: 0;
      top: 0;
    }
  }
  .point {
    display: inline-block;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background-color: #f56c6c;
    position: relative;
    top: 2px;
    margin-right: 12px;
  }
  .statusUl {
    display: flex;
    align-items: center;
    li {
      width: 150px;
      display: flex;
      align-items: center;
      margin-right: 10px;
      span:first-child {
        width: 12px;
        height: 12px;
        border-radius: 6px;
        display: inline-block;
        margin-right: 10px;
        // background: red;
      }
      span {
        line-height: 14px;
      }
    }
  }
}
</style>
